<template>
    <view class="page">
        <view class="advantage">
            <view class="section-title">合伙人特权</view>
            <view class="advantage-items">
                <view class="advantage-item" v-for="(v,k) in advantages" :key="k">
                    <view class="advantage-item-icon">
                        <image :src="v.icon"></image>
                    </view>
                    <text>{{v.name}}</text>
                </view>
            </view>
        </view>

        <!-- 邀请人输入框 -->
        <view class="invite" v-if="isVip==0">
            <view class="section-title">邀请人ID</view>
            <view class="invite-input">
                <input v-model="inviteUserId" placeholder="请输入邀请人ID" />
            </view>
        </view>

        <view class="option" v-if="isVip==0">
            <view class="option-item" v-for="(v, k) in options" :key="k">
                <view>
                    <view class="option-item-time">
                        <text>{{v.name}}</text>
                        <!-- <text>({{v.tip}})</text> -->
                    </view>
                    <view class="option-item-price">
                        <text></text>
                        <!-- <text>￥{{v.oldPrice}}</text> -->
                        <text>￥{{v.price}}</text>
                        <!-- <view class="option-item-price-line"></view> -->
                    </view>
                </view>
                <view class="option-item-button" @click="handlePay(v)">
                    开通
                </view>
            </view>
        </view>

        <!-- 协议勾选框 -->
        <view class="agreement-section" v-if="isVip==0 && options.length > 0">
            <view class="agreement-checkbox-wrapper" @click="handlePageAgreementClick">
                <checkbox-group @change="onPageAgreementChange">
                    <checkbox value="agree" :checked="agreedToTerms" class="agreement-checkbox" color="#667eea" />
                </checkbox-group>
                <text class="agreement-text">
                    已阅读并同意
                    <text class="agreement-link" @click.stop="showAgreementModal">《服务协议》</text>
                </text>
            </view>
        </view>

        <!-- 服务协议弹窗 -->
        <tui-bottom-popup :show="showAgreement" :height="800" @close="closeAgreementModal" :zIndex="99999">
            <view class="agreement-popup">
                <view class="agreement-header">
                    <text class="agreement-title">服务协议</text>
                    <view class="agreement-close" @click="closeAgreementModal">
                        <text class="close-icon-text">×</text>
                    </view>
                </view>
                <scroll-view 
                    scroll-y 
                    class="agreement-content" 
                    :scroll-top="scrollTop"
                    @scrolltolower="onScrollToLower"
                    :lower-threshold="100"
                    :scroll-with-animation="false"
                >
                    <view class="agreement-text-content" id="agreement-content">
                        <view class="agreement-paragraph">
                            依据《中华人民共和国民法典》及相关法律法规，甲乙双方本着平等自愿、诚实信用的原则，就甲方为乙方提供婚介服务事宜，经友好协商，达成如下协议，以资共同遵守。
                        </view>

                        <view class="agreement-section-title">一、服务内容与分类</view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">1.1</text>基础会员线上注册服务（付费标准：299元或868元/年）：乙方支付会员费后，成为甲方注册会员，服务期限自乙方线上缴费且甲方确认会员资格之日起计算，共计12个月。服务内容包含线上线下两部分，线上服务为甲方婚介平台账号使用权（含查看会员基础资料、发送沟通消息、参与线上匹配活动等），线下服务为甲方组织的线下交友活动参与资格（如小型茶话会、主题联谊等，不含一对一专属匹配）。
                        </view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">1.2.</text>成功结婚增值服务（付费标准：12868元）：若乙方在甲方提供基础会员服务期间，通过甲方匹配的资源成功与他人订婚或登记结婚（以《中华人民共和国结婚证》为准），需在订婚之日支付增值服务费（6868元），领取结婚证后当日向甲方支付6000元增值服务费（该费用不包含注册会员费299元，注册会员费已线上收取且不予退还）。
                        </view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">1.3</text>闪婚会员线上注册服务（付费标准：868元/年）闪婚专属服务（付费标准：26868元）：若乙方明确需求为"闪婚"（双方经甲方匹配后，自首次见面至登记结婚时间不超过6个月，且以《中华人民共和国结婚证》为准），甲方承诺将平台内优质资源（含优先匹配、专属顾问对接等）向乙方倾斜，若乙方成功实现闪婚，需按以下方式支付该笔26868元专属服务费（该费用替代上述12868元增值服务费，且不包含闪婚会员注册费868元，已线上注册收取的会员费用不予退还）：甲方为乙方提供订婚服务当日，乙方支付16868元；乙方与匹配对象成功领取《中华人民共和国结婚证》当日，支付剩余10000元。
                        </view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">1.4</text>订婚服务：服务内容为甲方指派专人作为乙方订婚婚礼证婚人，现场宣读证婚词，此服务相关费用已包含在26868元闪婚专属服务费中，不额外收取。
                        </view>

                        <view class="agreement-section-title">二、费用支付与结算</view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">2.1.</text>注册会员费：乙方需在本协议签订当日，通过甲方指定公司内网注册并足额支付268元/868元，甲方收到款项后3个工作日内，为乙方开通线上线下会员服务。
                        </view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">2.2.</text>成功结婚增值服务费：乙方订婚当天支付6868元，领取结婚证当天支付6000元服务费，逾期未支付的，每逾期1日，按未付金额的0.5%向甲方支付违约金。
                        </view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">2.3.</text>闪婚专属服务费：订婚服务当日，乙方现场向甲方支付16868元，甲方出具收款凭证；乙方领取结婚证后当日支付剩余10000元，逾期未支付的，每逾期1日，按剩余未付金额的0.8%向甲方支付违约金。
                        </view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">2.4.</text>所有费用支付后，除本协议明确约定的退还情形外，不予退还。
                        </view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">2.5.</text>费用支付账户：户名（邵阳柳江科技服务有限公司），账号（43050111403400001097），建设银行隆回九龙支行。
                        </view>

                        <view class="agreement-section-title">三、双方权利与义务</view>

                        <view class="agreement-subtitle">（一）甲方权利与义务</view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">3.1.</text>权利：
                        </view>
                        <view class="agreement-list-item">有权核实乙方提供的个人资料（含身份证、学历证明、婚姻状况证明等）的真实性，若发现乙方提供虚假资料，有权终止服务且不退还已收费用；</view>
                        <view class="agreement-list-item">有权按照本协议约定，按时收取相应服务费用；</view>
                        <view class="agreement-list-item">若乙方逾期支付费用，有权按约定收取违约金，逾期超过30日的，有权终止服务且不承担违约责任。</view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">3.2.</text>义务：
                        </view>
                        <view class="agreement-list-item">严格按照本协议约定的服务内容、期限提供服务，不得擅自缩减服务范围或延长服务开通时间；</view>
                        <view class="agreement-list-item">对乙方提供的个人隐私信息（含身份证号、联系电话、婚姻状况等）承担保密义务，不得向第三方泄露（法律法规要求披露或乙方书面同意的除外）；</view>
                        <view class="agreement-list-item">为乙方匹配会员资源时，需核实对方基础资料的真实性（至少包含身份证、婚姻状况证明），避免向乙方提供虚假资源；</view>

                        <view class="agreement-subtitle">（二）乙方权利与义务</view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">3.3.</text>权利：
                        </view>
                        <view class="agreement-list-item">有权要求甲方按照本协议约定提供服务，若甲方未履行约定义务，有权要求甲方整改，整改后仍未达标且影响服务核心目的的，有权解除协议并要求甲方退还已付未服务部分的费用（增值服务费/闪婚专属服务费未产生服务的全额退还）；</view>
                        <view class="agreement-list-item">有权查询自身会员服务进度、匹配资源的基础信息（甲方已核实的部分）；</view>
                        <view class="agreement-list-item">若因甲方原因导致乙方无法实现"成功结婚"或"闪婚"目标（如甲方未提供约定的资源倾斜、故意隐瞒匹配对象重大虚假信息等），有权拒绝支付对应增值服务费/闪婚专属服务费。</view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">3.4.</text>义务：
                        </view>
                        <view class="agreement-list-item">向甲方提供真实、准确、完整的个人资料（含身份证复印件、婚姻状况证明、学历证明等），若个人情况发生变更（如婚姻状况、联系电话等），需在3个工作日内书面告知甲方（注意工：错误填写要修改的需要重新支付基础注册费用）；</view>
                        <view class="agreement-list-item">与甲方匹配的会员交往过程中，需遵守法律法规及公序良俗，不得隐瞒自身重大信息（如传染性疾病、犯罪记录、债务纠纷等），若因乙方隐瞒信息导致纠纷，由乙方自行承担全部责任，与甲方无关；</view>
                        <view class="agreement-list-item">不得要求甲方提供违反法律法规、公序良俗的服务（如强制匹配、泄露第三方隐私等）；</view>
                        <view class="agreement-list-item">乙方不得无故拖延或拒绝支付，按照本协议约定按时支付服务费用到指定账户，未支付进入指定账户的，公司有权追讨，并由乙方负责追回过程中由此产生的诉讼费、律师费、误工费、差旅等全部费用。</view>

                        <view class="agreement-section-title">四、服务期限与终止</view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">4.1.</text>基础会员服务期限：自甲方确认乙方足额缴纳268元/868元注册会员费之日起12个月，期限届满后，本协议约定的基础会员服务自动终止，乙方若需继续享受服务，需另行签订协议并缴纳费用。
                        </view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">4.2.</text>增值服务（成功结婚/闪婚）期限：与基础会员服务期限一致，若基础会员服务期限届满，乙方仍未通过甲方资源成功结婚（或闪婚），则本协议约定的增值服务自动终止，乙方无需支付对应增值服务费/闪婚专属服务费。
                        </view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">4.3.</text>协议终止情形：
                        </view>
                        <view class="agreement-list-item">双方协商一致，书面解除本协议；</view>
                        <view class="agreement-list-item">基础会员服务期限届满，且无未履行的费用支付义务；</view>
                        <view class="agreement-list-item">乙方提供虚假资料，甲方按约定终止服务；</view>
                        <view class="agreement-list-item">甲方未履行核心服务义务，乙方书面解除协议；</view>
                        <view class="agreement-list-item">一方被依法宣告破产、吊销营业执照，无法继续履行协议。</view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">4.4.</text>协议终止后，甲方仍需对乙方的隐私信息承担保密义务，保密期限至乙方书面同意解除保密或信息已公开（非甲方泄露导致）之日止。
                        </view>

                        <view class="agreement-section-title">五、违约责任</view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">5.1.</text>甲方未按约定提供基础会员服务（如逾期开通服务超过7日、擅自关闭会员账号等）；逾期超过30日的，乙方有权解除协议或按服务时间顺延。
                        </view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">5.2.</text>甲方故意提供虚假匹配资源（如伪造对方身份证、婚姻状况等），导致乙方遭受损失的，需退还乙方已付全部费用，并协同乙方追回实际损失（以合法有效凭证为准）；若乙方已支付增值服务费/闪婚专属服务费，甲方需全额退还该部分费用。
                        </view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">5.3.</text>乙方提供虚假资料（如隐瞒已婚状态、伪造学历等），甲方有权终止服务，已收全部费用不予退还，若因乙方虚假资料导致甲方或第三方遭受损失，乙方需承担全部赔偿责任。
                        </view>

                        <view class="agreement-paragraph">
                            <text class="agreement-bold">5.4.</text>乙方逾期支付增值服务费/闪婚专属服务费，按本协议第二条约定支付违约金；逾期超过30日的，甲方有权终止服务，乙方已付费用不予退还，且需按未付金额的50%向甲方支付违约金。
                        </view>

                        <view class="agreement-section-title">六、争议解决</view>

                        <view class="agreement-paragraph">
                            因履行本协议产生的任何争议，双方应首先友好协商解决；协商不成的，任何一方均有权向甲方所在地有管辖权的人民法院提起诉讼。
                        </view>

                        <view class="agreement-section-title">七、其他条款</view>

                        <view class="agreement-paragraph">
                            乙方确认：本协议载明的联系地址及电话为有效送达地址，甲方通过该地址、电话发送的通知（含书面通知、短信、微信等），均视为已有效送达乙方。
                        </view>

                        <!-- 底部标记，用于检测是否滚动到底部 -->
                        <view class="agreement-bottom-marker" id="agreement-bottom"></view>
                    </view>
                </scroll-view>
                <view class="agreement-footer">
                    <view class="agreement-checkbox-wrapper-footer" @click="handleAgreementClick">
                        <checkbox-group @change="onAgreementChangeInModal">
                            <checkbox value="agree" :checked="agreedInModal" class="agreement-checkbox" color="#667eea" />
                        </checkbox-group>
                        <text class="agreement-text" :class="{ 'disabled-text': !hasScrolledToBottom }">
                            {{ hasScrolledToBottom ? '我已阅读并同意以上服务协议' : '请滚动到底部阅读完整协议' }}
                        </text>
                    </view>
                    <tui-button 
                        type="primary" 
                        shape="circle" 
                        width="100%" 
                        height="88rpx" 
                        :size="32"
                        :disabled="!agreedInModal || !hasScrolledToBottom"
                        @click="confirmAgreement"
                    >
                        同意并继续
                    </tui-button>
                </view>
            </view>
        </tui-bottom-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                advantages: [
                    { icon: 'https://cdn1.sanyedu.com/static/img/tj.png',name: '合伙人推荐奖' },
                    { icon: 'https://cdn1.sanyedu.com/static/img/gl.png',name: '团队管理奖' },
                    { icon: 'https://cdn1.sanyedu.com/static/img/dshy.png',name: '单身会员推荐奖' },
                    { icon: 'https://cdn1.sanyedu.com/static/img/qq.png',name: '全球分红' }
                ],
                options: [
                ],
                inviteUserId: '',  // 邀请人姓名
                openid: '',
                pro: null,
                isVip: 0,
                agreedToTerms: false, // 是否同意服务协议
                showAgreement: false, // 是否显示协议弹窗
                agreedInModal: false, // 弹窗内是否同意协议
                pendingPayItem: null, // 待支付的选项
                scrollTop: 0, // 滚动位置
                hasScrolledToBottom: false, // 是否已滚动到底部（本次会话）
                hasReadAgreement: false, // 是否已阅读过协议（3天内有效）
                scrollCheckTimer: null // 滚动检测定时器（用于防抖）
            }
        },
        mounted() {
            var t = this
            t.$api.req(`/station/member/get`,{

            },'GET',"JSON",false).then(res => {
                t.isVip = res.data.stationVip
            });
            t.loadList()
            t.$api.req(`/member/social-user/get?type=34`,{
            },'GET',"JSON",false).then(res => {
                if (res.code === 0) {
                    this.openid = res.data.openid
                }

            });
            // 检查是否在3天内已阅读过协议
            t.checkAgreementReadStatus();
        },
        methods: {
            loadList() {
                var t = this;
                t.$api.req(`/station/spu/get?id=1`,{},'GET',"JSON",false).then(res => {
                    if (res.code === 0 && res.data.skus) {
                        // 处理接口返回的 skus 数据
                        t.options = res.data.skus.map(item => {
                            // 将价格从分转换为元
                            let priceInYuan = (item.price / 100).toFixed(2);  // 当前价格（元）
                            let oldPriceInYuan = (item.costPrice / 100).toFixed(2);  // 旧价格（元）

                            // 计算每日价格（单位：元）
                            let dailyPrice = (priceInYuan / item.equityDays).toFixed(2); // 每日价格

                            return {
                                time: item.equityDays + '天会员', // 会员天数
                                tip: dailyPrice + '元/天', // 每日价格
                                oldPrice: oldPriceInYuan, // 旧价格（元）
                                price: priceInYuan, // 当前价格（元）
                                id: item.id, // 会员名称
                                name: item.properties, // 会员名称
                            };
                        });
                    }
                });
            },
            // 处理支付（检查协议）
            handlePay(v) {
                // 检查是否已同意协议
                if (!this.agreedToTerms) {
                    // 未同意协议，显示协议弹窗
                    this.pendingPayItem = v;
                    this.showAgreement = true;
                    // 延迟获取内容高度
                    this.$nextTick(() => {
                        this.getContentHeight();
                    });
                    return;
                }
                // 已同意协议，直接支付
                this.pay(v);
            },
            // 支付方法
            pay(v) {
                console.log(v);

                var t = this
                t.pro = v
                // if (this.f.isnull(this.inviteUserId) == '') {
                //     t.f.msg('请输入邀请人ID')
                //     return
                // }
                t.$api.req(`/station/pay-order/create`,{
                    skuId: v.id,
                    inviteUserId: this.inviteUserId
                },'POST',"JSON",false).then(res => {
                    console.log(res);

                    if (res.code == 1015001007) {
                        t.f.msg(res.msg)
                        return;
                    } else {
                        var orderId = res.data
                        let data = {
                            id: orderId,
                            channelCode: 'wx_lite',
                            channelExtras: { openid: this.openid },
                        };
                        t.$api.req(`/pay/order/submit`,data,'POST',"JSON",false).then(res1 => {
                            const payConfig = JSON.parse(res1.data.displayContent);
                            console.log(payConfig);
                            uni.requestPayment({
                                provider: 'wxpay',
                                timeStamp: payConfig.timeStamp,
                                nonceStr: payConfig.nonceStr,
                                package: payConfig.packageValue,
                                signType: payConfig.signType,
                                paySign: payConfig.paySign,
                                success: (res2) => {
                                    console.log(res2);
                                    t.f.nav(`/pages/index/index`)
                                },
                                fail: (err) => {
                                    if (err.errMsg === 'requestPayment:fail cancel') {
                                        uni.showToast({ title: '支付已手动取消', icon: 'none' });
                                    } else {
                                        this.payResult('fail');
                                    }
                                },
                            });

                        });
                    }

                });
            },
            // 检查协议阅读状态（3天有效期）
            checkAgreementReadStatus() {
                try {
                    const readData = uni.getStorageSync('agreement_read_time');
                    if (readData) {
                        const readTime = parseInt(readData);
                        const now = Date.now();
                        const threeDays = 3 * 24 * 60 * 60 * 1000; // 3天的毫秒数
                        // 如果3天内阅读过，标记为已阅读
                        if (now - readTime < threeDays) {
                            this.hasReadAgreement = true;
                            // 如果已阅读过，自动勾选
                            this.agreedToTerms = true;
                        } else {
                            // 超过3天，清除记录
                            uni.removeStorageSync('agreement_read_time');
                            this.hasReadAgreement = false;
                        }
                    }
                } catch (e) {
                    console.error('读取协议阅读状态失败:', e);
                }
            },
            // 保存协议阅读状态
            saveAgreementReadStatus() {
                try {
                    uni.setStorageSync('agreement_read_time', Date.now().toString());
                    this.hasReadAgreement = true;
                } catch (e) {
                    console.error('保存协议阅读状态失败:', e);
                }
            },
            // 处理页面协议勾选框点击
            handlePageAgreementClick(e) {
                // 如果点击的是协议链接，不处理（由showAgreementModal处理）
                if (e.target && e.target.tagName === 'TEXT' && e.target.classList && e.target.classList.contains('agreement-link')) {
                    return;
                }
                // 如果未勾选且未阅读过，打开协议弹窗
                if (!this.agreedToTerms && !this.hasReadAgreement) {
                    this.showAgreementModal();
                }
            },
            // 清除协议阅读状态
            clearAgreementReadStatus() {
                try {
                    uni.removeStorageSync('agreement_read_time');
                    this.hasReadAgreement = false;
                } catch (e) {
                    console.error('清除协议阅读状态失败:', e);
                }
            },
            // 页面协议勾选变化
            onPageAgreementChange(e) {
                const values = e.detail.value || [];
                const isChecked = values.includes('agree');
                
                // 如果用户取消勾选，清除阅读状态，需要重新阅读
                if (!isChecked) {
                    this.agreedToTerms = false;
                    this.clearAgreementReadStatus();
                    return;
                }
                
                // 如果用户勾选但未阅读过协议，打开弹窗
                if (isChecked && !this.hasReadAgreement) {
                    // 阻止勾选，打开协议弹窗
                    this.agreedToTerms = false;
                    this.showAgreementModal();
                } else if (isChecked && this.hasReadAgreement) {
                    // 如果已阅读过（3天内），直接允许勾选
                    this.agreedToTerms = true;
                }
            },
            // 显示协议弹窗
            showAgreementModal() {
                this.showAgreement = true;
                // 如果3天内已阅读过，直接允许勾选，不需要再滚动
                if (this.hasReadAgreement) {
                    this.hasScrolledToBottom = true;
                    this.agreedInModal = true;
                } else {
                    // 如果未阅读过，需要滚动到底部
                    this.hasScrolledToBottom = false;
                    this.agreedInModal = false;
                }
                this.scrollTop = 0;
            },
            // 关闭协议弹窗
            closeAgreementModal() {
                this.showAgreement = false;
                // 如果3天内已阅读过，保持状态；否则重置
                if (!this.hasReadAgreement) {
                    this.agreedInModal = false;
                    this.hasScrolledToBottom = false;
                }
                this.scrollTop = 0;
                // 清除定时器
                if (this.scrollCheckTimer) {
                    clearTimeout(this.scrollCheckTimer);
                    this.scrollCheckTimer = null;
                }
            },
            // 处理协议勾选点击
            handleAgreementClick(e) {
                // 如果3天内已阅读过，允许操作
                if (this.hasReadAgreement) {
                    return;
                }
                // 如果未滚动到底部，阻止勾选
                if (!this.hasScrolledToBottom) {
                    uni.showToast({
                        title: '请先滚动到底部阅读完整协议',
                        icon: 'none',
                        duration: 2000
                    });
                    // 阻止checkbox的默认行为
                    e.preventDefault && e.preventDefault();
                    e.stopPropagation && e.stopPropagation();
                    return false;
                }
            },
            // 弹窗内协议勾选变化
            onAgreementChangeInModal(e) {
                const values = e.detail.value || [];
                const isChecked = values.includes('agree');
                
                // 如果用户取消勾选，清除阅读状态
                if (!isChecked) {
                    this.agreedInModal = false;
                    this.agreedToTerms = false;
                    this.clearAgreementReadStatus();
                    // 重置滚动状态，下次需要重新阅读
                    this.hasScrolledToBottom = false;
                    return;
                }
                
                // 如果3天内已阅读过，允许直接勾选
                if (this.hasReadAgreement) {
                    this.agreedInModal = isChecked;
                    this.agreedToTerms = isChecked;
                    return;
                }
                
                // 如果未阅读过，检查是否已滚动到底部
                if (!this.hasScrolledToBottom) {
                    // 如果未滚动到底部，强制保持为未勾选状态
                    this.agreedInModal = false;
                    uni.showToast({
                        title: '请先滚动到底部阅读完整协议',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                // 如果已滚动到底部，允许用户手动操作
                this.agreedInModal = isChecked;
                this.agreedToTerms = isChecked;
            },
            // 滚动到底部事件（scroll-view自带）- 只判断一次
            onScrollToLower() {
                // 如果已经标记为已滚动到底部，不再处理
                if (this.hasScrolledToBottom) {
                    return;
                }
                // 如果3天内已阅读过，不需要再记录
                if (this.hasReadAgreement) {
                    return;
                }
                // 标记为已滚动到底部（本次会话）
                this.hasScrolledToBottom = true;
                // 保存阅读状态（3天有效期）
                this.saveAgreementReadStatus();
                // 自动勾选协议
                this.agreedInModal = true;
                // 同步到页面上的勾选状态
                this.agreedToTerms = true;
                uni.showToast({
                    title: '已阅读完整协议',
                    icon: 'success',
                    duration: 1500
                });
            },
            // 确认协议并继续支付
            confirmAgreement() {
                // 如果3天内已阅读过，直接允许
                if (this.hasReadAgreement) {
                    if (!this.agreedInModal) {
                        uni.showToast({
                            title: '请先同意服务协议',
                            icon: 'none',
                            duration: 2000
                        });
                        return;
                    }
                } else {
                    // 如果未阅读过，检查是否已滚动到底部
                    if (!this.hasScrolledToBottom) {
                        uni.showToast({
                            title: '请先滚动到底部阅读完整协议',
                            icon: 'none',
                            duration: 2000
                        });
                        return;
                    }
                    // 检查是否已勾选
                    if (!this.agreedInModal) {
                        uni.showToast({
                            title: '请先同意服务协议',
                            icon: 'none',
                            duration: 2000
                        });
                        return;
                    }
                    // 保存阅读状态（3天有效期）
                    this.saveAgreementReadStatus();
                }
                
                // 更新页面上的协议同意状态
                this.agreedToTerms = true;
                // 关闭弹窗
                this.closeAgreementModal();
                // 如果有待支付的选项，执行支付
                if (this.pendingPayItem) {
                    this.pay(this.pendingPayItem);
                    this.pendingPayItem = null;
                }
            }
        }
    }
</script>
<style lang="scss">
    page {
        background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    }

    .page {
        min-height: 100vh;
        padding: 20rpx;

        /* 统一标题样式 */
        .section-title {
            font-size: 36rpx;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 30rpx;
            display: flex;
            align-items: center;
            text-align: left;
            position: relative;
        }

        .section-title::before {
            content: '';
            width: 8rpx;
            height: 32rpx;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 4rpx;
            margin-right: 16rpx;
        }
        .advantage {
            display: flex;
            flex-direction: column;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            width: 100%;
            margin: 0 auto 30rpx;
            border-radius: 24rpx;
            box-sizing: border-box;
            padding: 40rpx 30rpx;
            box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
            border: 1rpx solid rgba(255, 255, 255, 0.8);
            position: relative;
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4rpx;
                /* background: linear-gradient(90deg, #667eea, #764ba2, #a55fee); */
            }

            /* 特权项目容器 */
            .advantage-items {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-top: 20rpx;
            }


            .advantage-item {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                width: calc(50% - 10rpx);
                height: 200rpx;
                margin-bottom: 20rpx;
                background: linear-gradient(135deg, #f8f9fa, #ffffff);
                border-radius: 20rpx;
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
                box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

                &:hover {
                    transform: translateY(-4rpx);
                    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
                }

                .advantage-item-icon {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                    background: linear-gradient(135deg, #667eea, #764ba2);
                    margin-bottom: 16rpx;
                    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
                    transition: all 0.3s ease;

                    &:hover {
                        transform: scale(1.1);
                    }

                    image {
                        width: 60rpx;
                        height: 60rpx;
                        filter: brightness(0) invert(1);
                    }
                }

                text {
                    font-size: 28rpx;
                    color: #2c3e50;
                    font-weight: 600;
                    text-align: center;
                    line-height: 1.4;
                }
            }
        }

        .invite {
            width: 100%;
            margin: 0 auto 30rpx;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 24rpx;
            padding: 40rpx 30rpx;
            box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
            border: 1rpx solid rgba(255, 255, 255, 0.8);
            position: relative;
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4rpx;
                /* background: linear-gradient(90deg, #667eea, #764ba2, #a55fee); */
            }


            .invite-input {
                background: #f8f9fa;
                border-radius: 16rpx;
                padding: 20rpx;
                border: 2rpx solid #e9ecef;
                transition: all 0.3s ease;

                &:focus-within {
                    border-color: #667eea;
                    box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
                }

                input {
                    width: 100%;
                    height: 80rpx;
                    font-size: 32rpx;
                    padding: 0 20rpx;
                    border: none;
                    outline: none;
                    background: transparent;
                    color: #2c3e50;
                }
            }
        }

        .option {
            width: 100%;
            margin: 0 auto;

            .option-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                min-height: 200rpx;
                background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
                border-radius: 24rpx;
                box-sizing: border-box;
                padding: 40rpx 30rpx;
                margin-bottom: 24rpx;
                box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
                border: 1rpx solid rgba(255, 255, 255, 0.8);
                position: relative;
                overflow: hidden;
                transition: all 0.3s ease;

                &:hover {
                    transform: translateY(-4rpx);
                    box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
                }

                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 4rpx;
                    /* background: linear-gradient(90deg, #667eea, #764ba2, #a55fee); */
                }

                .option-item-button {
                    background: linear-gradient(135deg, #667eea, #764ba2);
                    height: 80rpx;
                    width: 180rpx;
                    border-radius: 40rpx;
                    text-align: center;
                    line-height: 80rpx;
                    color: #fff;
                    font-size: 32rpx;
                    font-weight: 600;
                    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
                    transition: all 0.3s ease;
                    position: relative;
                    overflow: hidden;

                    &::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: -100%;
                        width: 100%;
                        height: 100%;
                        /* background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); */
                        transition: left 0.5s ease;
                    }

                    &:hover::before {
                        left: 100%;
                    }

                    &:active {
                        transform: scale(0.95);
                        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.4);
                    }
                }

                .option-item-time {
                    margin-bottom: 12rpx;

                    text {
                        &:nth-child(1) {
                            font-weight: 700;
                            font-size: 32rpx;
                            color: #2c3e50;
                        }

                        &:nth-child(2) {
                            font-size: 28rpx;
                            color: #6c757d;
                            margin-left: 8rpx;
                        }
                    }
                }

                .option-item-price {
                    position: relative;
                    display: flex;
                    align-items: baseline;
                    gap: 8rpx;

                    text {
                        &:nth-child(1) {
                            font-size: 28rpx;
                            color: #6c757d;
                        }

                        &:nth-child(2) {
                            font-size: 48rpx;
                            color: #667eea;
                            font-weight: 700;
                            text-shadow: 0 2rpx 4rpx rgba(102, 126, 234, 0.2);
                        }
                    }

                    .option-item-price-line {
                        position: absolute;
                        left: 0;
                        bottom: 10px;
                        width: 32px;
                        height: 1px;
                        background: #999;
                    }
                }
            }
        }

        /* 协议勾选区域 - 简洁样式 */
        .agreement-section {
            width: 100%;
            margin: 30rpx auto 40rpx;
            padding: 0 10rpx;
        }

        .agreement-checkbox-wrapper {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: #333;
            line-height: 1.5;
        }

        .agreement-checkbox {
            margin-right: 12rpx;
            transform: scale(0.9);
        }

        .agreement-text {
            flex: 1;
            color: #333;
        }

        .agreement-link {
            color: #1890ff;
            text-decoration: none;
        }

        /* 协议弹窗样式 */
        .agreement-popup {
            background: #fff;
            border-top-left-radius: 24rpx;
            border-top-right-radius: 24rpx;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .agreement-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 32rpx 30rpx 24rpx;
            border-bottom: 1rpx solid #f0f0f0;
            position: sticky;
            top: 0;
            background: #fff;
            z-index: 10;
        }

        .agreement-title {
            font-size: 36rpx;
            font-weight: 600;
            color: #1a1a1a;
        }

        .agreement-close {
            width: 60rpx;
            height: 60rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: transparent;
            transition: all 0.2s ease;
            position: relative;
        }

        .agreement-close:active {
            background: rgba(0, 0, 0, 0.06);
            transform: scale(0.92);
        }

        .close-icon-text {
            font-size: 44rpx;
            color: #999;
            font-weight: 300;
            line-height: 1;
            margin-top: -2rpx;
            transition: all 0.2s ease;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .agreement-close:active .close-icon-text {
            color: #666;
        }

        .agreement-content {
            flex: 1;
            padding: 0 30rpx;
            height: calc(100% - 200rpx);
            background: #fff;
        }

        .agreement-text-content {
            font-size: 28rpx;
            line-height: 2;
            color: #333;
            padding: 30rpx 0;
        }

        .agreement-section-title {
            font-size: 32rpx;
            font-weight: 600;
            color: #1a1a1a;
            margin: 40rpx 0 24rpx 0;
            padding-bottom: 16rpx;
            border-bottom: 1rpx solid #f0f0f0;
        }

        .agreement-subtitle {
            font-size: 30rpx;
            font-weight: 500;
            color: #495057;
            margin: 32rpx 0 20rpx 0;
            padding-left: 16rpx;
            border-left: 3rpx solid #1890ff;
        }

        .agreement-paragraph {
            margin-bottom: 24rpx;
            text-align: justify;
            color: #555;
        }

        .agreement-bold {
            font-weight: 600;
            color: #1a1a1a;
            margin-right: 8rpx;
        }

        .agreement-list-item {
            margin-left: 32rpx;
            margin-bottom: 16rpx;
            padding-left: 16rpx;
            position: relative;
            line-height: 1.8;
            color: #555;
        }

        .agreement-list-item::before {
            content: '•';
            position: absolute;
            left: 0;
            color: #1890ff;
            font-weight: bold;
        }

        .agreement-bottom-marker {
            height: 1rpx;
            margin-top: 40rpx;
        }

        .agreement-footer {
            padding: 24rpx 30rpx;
            padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
            border-top: 1rpx solid #f0f0f0;
            background: #fff;
        }

        .agreement-checkbox-wrapper-footer {
            display: flex;
            align-items: center;
            margin-bottom: 24rpx;
            font-size: 26rpx;
            color: #333;
            line-height: 1.5;
        }

        .agreement-checkbox-wrapper-footer .agreement-checkbox {
            margin-right: 12rpx;
            transform: scale(0.9);
        }

        .agreement-checkbox-wrapper-footer .agreement-text {
            flex: 1;
        }

        .disabled-text {
            color: #999 !important;
        }
    }
</style>